<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>富途实时行情</title>
    <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; }
        .up { color: green; }
        .down { color: red; }
    </style>
</head>
<body>
<h1>富途实时行情</h1>
<table id="quoteTable">
    <thead>
        <tr>
            <th>股票</th>
            <th>日期</th>
            <th>时间</th>
            <th>最新价</th>
            <th>开盘</th>
            <th>最高</th>
            <th>最低</th>
            <th>昨收</th>
            <th>成交量</th>
            <th>成交额</th>
            <th>换手率</th>
            <th>振幅</th>
            <th>停牌</th>
            <th>上市日期</th>
            <th>价差</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
const socket = io();
const tableBody = document.getElementById('quoteTable').querySelector('tbody');
const rows = {};  // 每只股票对应行

socket.on('quote_update', function(data) {
    const code = data.stock_code;

    if (!rows[code]) {
        const tr = document.createElement('tr');
        const fields = [
            'stock_name', 'data_date', 'data_time', 'last_price', 'open_price', 'high_price',
            'low_price', 'prev_close_price', 'volume', 'turnover', 'turnover_rate',
            'amplitude', 'suspension', 'listing_date', 'price_spread'
        ];
        fields.forEach(field => {
            const td = document.createElement('td');
            td.id = `${code}_${field}`;
            tr.appendChild(td);
        });
        tableBody.appendChild(tr);
        rows[code] = tr;
    }

    const fields = [
        'stock_name', 'data_date', 'data_time', 'last_price', 'open_price', 'high_price',
        'low_price', 'prev_close_price', 'volume', 'turnover', 'turnover_rate',
        'amplitude', 'suspension', 'listing_date', 'price_spread'
    ];
    fields.forEach(field => {
        const td = document.getElementById(`${code}_${field}`);
        if (!td) return;
        td.innerText = data[field] !== undefined ? data[field] : '';
    });
});
</script>
</body>
</html>
